<template>
	<view class="content">
		<view class="" style="display: flex;">
		<view class="" style="width: 1vw;height: 1px;"></view>
		<view class="rightcontent">
			<view class="" style="border-radius: 30px;">
				<swiper class="swiper1" :circular="true" autoplay="true" style="border-radius: 30px;">
					<swiper-item v-for="item in list1" :key="item.id" >
						<image class="cover" style="border-radius: 30px;" :src="getFullImageUrl(item.avatar)" @tap="goToPage(item.linkUrl)"></image>
					</swiper-item>
				</swiper>
			</view>
		

		<view class="chooses">
			<view class="tjlistall">
					<view class="tjlist" @click="tjlist1click" :style="{
			backgroundImage: `url(${tjlistsrc1})`,   
			backgroundSize: 'cover'
							}" >
						<view  style="width: 65%; height: 100%; border-radius: 30px; background-color: rgba(0, 0, 0, 0.3);">
							<view class="" style="height: 6%;">
								
							</view>
							<view class="" style="margin-left: 10%; font-size: 30rpx; color: aliceblue;text-align: center;">
								{{this.tjlist[0].tatle}}
							</view>
							<view class="" style="width: 90%; height: 1px; background-color: aliceblue; margin-left: 5%; margin-right: 5%; margin-top: 5%; ">
								
							</view>
							<view class="xxms" style="margin-top: 10%;   margin-left: 5%; font-size: 20rpx; color: aliceblue;height: 40%; display: -webkit-box; -webkit-box-orient: vertical; overflow-y: auto; line-height: 30rpx; ">
								{{this.tjlist[0].text}}
							</view>
						</view>
					</view>
					<view class="tjlist" @click="tjlist2click" :style="{
					backgroundImage: `url(${tjlistsrc2})`,   
					backgroundSize: 'cover'
									}" >
								<view  style="width: 65%; height: 100%; border-radius: 30px; background-color: rgba(0, 0, 0, 0.3);">
									<view class="" style="height: 6%;">
										
									</view>
									<view class="" style="margin-left: 10%; font-size: 30rpx; color: aliceblue;text-align: center;">
										{{this.tjlist[1].tatle}}
									</view>
									<view class="" style="width: 90%; height: 1px; background-color: aliceblue; margin-left: 5%; margin-right: 5%; margin-top: 5%; ">
										
									</view>
									<view class="xxms" style="margin-top: 10%;   margin-left: 5%; font-size: 20rpx; color: aliceblue;height: 40%; display: -webkit-box; -webkit-box-orient: vertical; overflow-y: auto; line-height: 30rpx; ">
										{{this.tjlist[1].text}}
									</view>
								</view>
							</view>
					<view class="tjlist" @click="tjlist3click" :style="{
					backgroundImage: `url(${tjlistsrc3})`,   
					backgroundSize: 'cover'
									}" >
								<view  style="width: 65%; height: 100%; border-radius: 30px; background-color: rgba(0, 0, 0, 0.3);">
									<view class="" style="height: 6%;">
										
									</view>
									<view class="" style="margin-left: 10%; font-size: 30rpx; color: aliceblue;text-align: center;">
										{{this.tjlist[2].tatle}}
									</view>
									<view class="" style="width: 90%; height: 1px; background-color: aliceblue; margin-left: 5%; margin-right: 5%; margin-top: 5%; ">
										
									</view>
									<view class="xxms" style="margin-top: 10%;   margin-left: 5%; font-size: 20rpx; color: aliceblue;height: 40%; display: -webkit-box; -webkit-box-orient: vertical; overflow-y: auto; line-height: 30rpx; ">
										{{this.tjlist[2].text}}
									</view>
								</view>
							</view>
					<view class="tjlist" @click="tjlist4click" :style="{
					backgroundImage: `url(${tjlistsrc4})`,   
					backgroundSize: 'cover'
									}" >
								<view  style="width: 65%; height: 100%; border-radius: 30px; background-color: rgba(0, 0, 0, 0.3);">
									<view class="" style="height: 6%;">
										
									</view>
									<view class="" style="margin-left: 10%; font-size: 30rpx; color: aliceblue;text-align: center;">
										{{this.tjlist[3].tatle}}
									</view>
									<view class="" style="width: 90%; height: 1px; background-color: aliceblue; margin-left: 5%; margin-right: 5%; margin-top: 5%; ">
										
									</view>
									<view class="xxms" style="margin-top: 10%;   margin-left: 5%; font-size: 20rpx; color: aliceblue;height: 40%; display: -webkit-box; -webkit-box-orient: vertical; overflow-y: auto; line-height: 30rpx; ">
										{{this.tjlist[3].text}}
									</view>
								</view>
							</view>
			</view>
			
			<!-- <u-row justify="space-between" gutter="5">
				<u-col span="3" v-for="(item,index) in select" @click="toTestPage(index)">
					<view class="choose_bg">
						<view class="image">
							<image :src="item.image" class="images"></image>
						</view>

						<view class="c_text">
							{{item.name}}
						</view>
					</view>
				</u-col>
			</u-row> -->
			<view>
				<view>
					<u-notice-bar class="choose_zixun" :text="list2.title" direction="row" step color="#000000"
						bgColor="#effaff" style="font-size: 35rpx;">
					</u-notice-bar>
				</view>

			</view>
		</view>
		<view class="zhong"></view>
		<view class="xinxi">
			<u-subsection class="sub" :list="list5" :current="current" @change="dianji">
			</u-subsection>
			<view>
				<u-cell v-for="item in list3" @click="handle(item.id)" :title="item.informationTitle" isLink>
				</u-cell>
			</view>

		</view>
		</view>
	</view>
</view>
</template>


<script>
	import {
		studentIDLogin
	} from '../../api/loginModel/loginModel';
	import {
		getImages,
		getKnowledge
	} from '../../api/index/index'
	import leftmenuVue from '../common/leftmenu.vue'
	
	export default {
		 components: {
		    leftmenuVue
		  },
		data() {
			return {
				
				baseURL: this.$baseURL,
				title: '',
				
				current: 0,
				t_class1: "t_text_plus",
				t_class2: "t_text",
				t_class3: "t_text",
				t_class4: "t_text_plus",
				list1: [],
				list2: {
					title: [
						"与你同行 : 新学期心理咨询服务已开启",
						"模拟面试 : 身临其境的体验面试"
					]
				},
				list3: [],
				list4: [],
				list5: [],
				tjlist:[
					{id:1,tatle:"画图心理分析",text:"面相分析（Face Analysis），通过上传符合要求的正脸照片，利用相关技术进行面相分析",url:"../psychologyModel/drawingAnalysis/drawing/drawing"},
						{id:2,tatle:"就业政策",text:"促进就业创业、提供职业技能培训、扶持重点群体（如高校毕业生、农民工等）、鼓励灵活就业、落实社保补贴等",url:"../knowledgeModel/strategy/strategy"},
						{id:3,tatle:"mbti人格测试",text:"迈尔斯布里格斯类型指标是在荣格心理类型理论的基础上编制的一种人格类型评估工具。",url:"../careerModel/mbtiTest/mbtiTest"},
						{id:4,tatle:"霍兰德职业性格测试",text:"测试结果会匹配与之对应的职业列表，为职业方向提供具体参考，减少选择时的迷茫感。",url:"../careerModel/HollandTest/HollandTest"},
						],
				tjlistsrc1:this.$baseURL+"/profile/upload/2025/05/29/c7012eba9e1b3160f7981bbcd0f7935_20250529132303A018.png",
				tjlistsrc2:this.$baseURL+"/profile/upload/2025/05/28/bj2_20250528211953A016.png",
				tjlistsrc3:this.$baseURL+"/profile/upload/2025/05/27/hld_20250527101206A005.jpg",
				tjlistsrc4:this.$baseURL+"/profile/upload/2025/06/03/hldbgc_20250603132819A138.jpg",
				select: [{
						id: 1,
						name: "心理健康测试",
						image: this.$baseURL +
							"/profile/upload/2025/05/30/009-wishlist_20250530170608A109.png",
						url: "/pages/psychologyModel/psychHome"
					},
					{
						id: 2,
						name: "就业基础知识",
						image: this.$baseURL +
							"/profile/upload/2025/05/30/jczs_20250530171406A113.png",
							url: "/pages/knowledgeModel/firstpage/firstpage"
					},
					{
						id: 3,
						name: "职业规划测试",
						image: this.$baseURL +
							"/profile/upload/2025/05/10/choose3_20250507105305A054_20250510150016A015.png",
							url: "/pages/careerModel/testList/testList"
					},
					{
						id: 4,
						name: "模拟面试",
						image: this.$baseURL +
							"/profile/upload/2025/05/10/choose4_20250507105342A055_20250510150023A016.png",
							url: "/pages/mianshi/mianshi/mianshi"
					}
				],
				groupedList: {},
				uniqueTypes: ''
			}
		},
		mounted() {
			console.log("进入请求")
			uni.setStorageSync('page', 'indexpage')
			studentIDLogin({
				studentID: "admin",
				password: "123456",
				code: ""
			}).then((res) => {
				if (res.code == 200) {
					console.log("请求成功")
					// 登录成功设置token
					uni.setStorageSync("token", res.data.token)
					this.getHomeData(); // 调用首页数据接口
				} else {
					// 登录失败
					// 登录失败时调用
					// uni.showToast({
					// 	title: '学号或密码错误',
					// 	icon: 'none', // 使用 'none' 避免默认的对勾图标
					// 	duration: 2000 // 显示时间 2 秒
					// });
					// console.log(res.msg)
				}
			})

		},

		methods: {
			tjlist1click(){
				uni.navigateTo({
					url:this.tjlist[0].url
				})
			},
			tjlist2click(){
				uni.navigateTo({
					url:this.tjlist[1].url
				})
			},
			
			tjlist3click(){
				uni.navigateTo({
					url:this.tjlist[2].url
				})
			},
			tjlist4click(){
				uni.navigateTo({
					url:this.tjlist[3].url
				})
			},
			getFullImageUrl(avatarPath) {
				if (!avatarPath) {
					console.error('avatarPath is undefined or empty');
					return ''; // 或者返回一个默认图片路径
				}

				// 确保 avatarPath 不以斜杠开头，避免双斜杠
				const path = avatarPath.startsWith('/') ? avatarPath.substring(1) : avatarPath;

				// 打印完整 URL 用于调试
				const fullUrl = `${this.$baseURL}/${path}`;

				return fullUrl;
			},
			getHomeData() {
				getImages().then((res) => {
						if (res.code == 200) {
							console.log(res.rows)
							this.list1 = res.rows
						} else {
							console.log(res.msg)
						}
					}),
					getKnowledge().then((res) => {
						if (res.code == 200) {
							// console.log(res.rows)
							// 先提取所有类型，去重，再映射为中文  动态修改tab栏
							this.uniqueTypes = [...new Set(res.rows.map(item => item.informationType))];
							// console.log(this.uniqueTypes)
							this.list5 = this.uniqueTypes.map(type => {
								return type === '0' ?
									'就业知识' :
									type === '1' ?
									'求职政策' :
									'心理健康资讯';
							});

							// 把 res.rows 按照 informationType 分组存起来
							this.groupedList = {};
							//基础知识部分标题
							res.rows.forEach(item => {
								//分组
								const type = item.informationType;
								if (!this.groupedList[type]) {
									this.groupedList[type] = [];
								}
								this.groupedList[type].push(item);
							});
							console.log(this.groupedList)
							this.list4[0] = this.groupedList[0]
							console.log(this.list4[0])
							this.list3 = this.list4[0]

						} else {
							console.log(res.msg)
						}
					})

			},
			//轮播图跳转
			goToPage(linkUrl) {
				// if (linkUrl) {
				// 	uni.navigateTo({
				// 		url: linkUrl
				// 	});
				// }
			},
			dianji(index) {
				this.current = index
				if (index == 0) {
					this.list4[0] = this.groupedList[0]
					this.list3 = this.list4[0]
				} else if (index == 1) {
					this.list4[1] = this.groupedList[1]
					this.list3 = this.list4[1]
				} else {
					this.list4[2] = this.groupedList[2]
					this.list3 = this.list4[2]
				}
			},
			/*根据num获取文章内容*/
			handle(num) {
				console.log("跳转政策页面"+num)
				uni.navigateTo({
					url: "../index/text/text?id=" + num
				});

			},

			// 跳转各种测试页面
			toTestPage(id) {
				// 

				switch (id) {
					case 0:
						uni.navigateTo({
							url: "/pages/psychologyModel/psychHome"
						});
						break
					case 1:
						// console.log("跳转到就业基础知识页面")

						uni.navigateTo({
							url: "/pages/knowledgeModel/firstpage/firstpage"
						});
						break
					case 2:
						uni.navigateTo({
							url: "/pages/careerModel/testList/testList"
						});
						break

					case 3:
						// console.log("跳转到模拟面试页面")
						uni.navigateTo({
							url: "/pages/mianshi/mianshi/mianshi"
						});
						break
				}

			}


		}
	}
</script>

<style>
	.tjlistall{
		display: flex;
		justify-content: space-around;
		/* flex-wrap: wrap; */
	}
	.tjlist{
		border-radius: 30px;
		background: #e0e0e0;
		box-shadow:  23px 23px 49px #aaaaaa,
		             -23px -23px 49px #ffffff;
		width: 300rpx;height: 200rpx;
		
		margin-bottom: 20rpx;
	}
	.rightcontent{
		width: 89vw;
		height: 96vh;
		margin-left: 1vw;
		margin-right: 2vw;
	}
	
	.swiper1,
	.cover {
		width: 100%;
		height: 39vh;
	}

	.images {
		width: 100rpx;
		height: 100rpx;
	}

	.chooses {
		margin: 20rpx 0;
		background-color: #ffffff;
		padding: 10rpx 20rpx;
	}

	.choose_bg {

		margin: auto;
		height: 180rpx;

	}

	.image {
		margin: auto;
		width: 100rpx;
	}

	.choose_zixun {
		
		height: 3vh;
	}

	.zhong {
		height: 1rpx;
		background-color: #dedede;
	}

	.c_text {
		margin-top: 15rpx;
		font-size: 27rpx;
		font-family: KaiTi;
		letter-spacing: 0rpx;
		text-align: center;
	}
</style>